<template>
  <el-dialog
    :title="typeMsg + '商品信息'"
    :visible="dialogVisible"
    width="35%"
    top="50px"
    :before-close="handleDialogVisible"
    v-if="dialogVisible"
  >
    <el-form ref="form" :value="myItemMsg" label-position="right">
      <el-form-item label="商品名" :label-width="formLabelWidth">
        <el-input v-model="myItemMsg.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          action="#"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :http-request="handleUploadOperate"
          :limit="1"
          :on-exceed="handleExceed"
          :before-upload="handleUploadLimit"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过10MB
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input-number
          v-model="myItemMsg.price"
          :min="0"
          :controls="false"
          :precision="2"
          placeholder="只能输入数字"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="库存" :label-width="formLabelWidth">
        <div class="block">
          <el-slider v-model="myItemMsg.inventory" show-input :max="9999">
          </el-slider>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleUpdateItem">确 定</el-button>
      <el-button @click="colseDialogVisible">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { uploadResource } from "@/apis/upload";
import { updateItem, addItemMsg } from "@/apis/home";
import { EDITOR, ADD } from "@/configs/constant";
import uploadLimit from "@/mixins/uploadLimit";
export default {
  mixins: [uploadLimit],
  props: [
    "dialogVisible",
    "handleDialogVisible",
    "itemMsg",
    "paginationMsg",
    "getItemListMsg",
    "colseDialogVisible",
    "type",
    "typeMsg",
  ],
  data() {
    return {
      value: 0,
      formLabelWidth: "80px",
      fileList: [{ name: "", url: "" }],
      fileListCopy: [],
      formData: new FormData(),
      myItemMsg: {},
      pictureUrl: "",
    };
  },
  methods: {
    handleExceed() {
      this.$message.warning("请先把原有图片删除再进行上传");
    },
    handleRemove() {
      this.pictureUrl = "";
    },

    async handleUploadOperate(fileMsg) {
      this.hasFile(fileMsg, this.formData);
      const { data } = await uploadResource(this.formData);
      this.pictureUrl = data;
      this.$message.success("上传成功");
    },
    async handleUpdateItem() {
      this.$confirm(`确定要${this.typeMsg}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const fromMsg = {
            ...this.myItemMsg,
            picture: this.pictureUrl,
          };
          if (this.type === EDITOR) {
            const data = await updateItem(fromMsg);
          } else if (this.type === ADD) {
            const data = await addItemMsg(fromMsg);
          }

          const { pageNum, pageSize } = this.paginationMsg;
          this.getItemListMsg(pageNum, pageSize);
          this.handleDialogVisible();
          this.$message({
            type: "success",
            message: `${this.typeMsg}成功!`,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${this.typeMsg}`,
          });
        });
    },
  },
  watch: {
    itemMsg(newVal, oldVal) {
      this.myItemMsg = { ...newVal };
      this.fileList[0] = { name: "", url: this.myItemMsg.picture };
      this.pictureUrl = this.myItemMsg.picture;
    },
    type(newVal, oldVal) {
      if (newVal === ADD) {
        this.fileList = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
form {
  padding: 0;
}
:deep .el-form-item {
  width: 100%;
}
</style>
